<template>

  <div>
    <el-card class="box-card">
      <el-form ref="lineType" :model="queryVO" label-width="150px" :inline="true">
        <el-form-item label="线路类型编号:" prop="typeNumber">
          <el-input type="text" placeholder="请输入线路类型编号" v-model="queryVO.typeNumber"></el-input>
        </el-form-item>
        <el-form-item label="线路类型名称:" prop="name">
          <el-input type="text" placeholder="请输入类型名称" v-model="queryVO.name"></el-input>
        </el-form-item>
        <el-form-item label="起始机构类型:" prop="startAgencyType">
          <el-select v-model="queryVO.startAgencyType" clearable placeholder="请选择">
            <el-option
              v-for="item in updSelect"
              :label="item.label"
              :value="item.value"
              :key="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="sousuo()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="reset('lineType')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-divider></el-divider>

    <el-card class="box-card">
      <el-button @click="openAddLineType()" type="info" icon="el-icon-edit">新增线路类型</el-button>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            <!--            queryVo.pageNum 当前页
                        queryVo.pageSize 页大小-->
            {{ scop.$index + (pagenum - 1) * pagesize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="typeNumber" label="线路类型编号">

        </el-table-column>
        <el-table-column prop="name" label="线路类型名称">

        </el-table-column>
        <el-table-column label="起始机构类型">
          <template slot-scope="scop">
            <label v-if="scop.row.startAgencyType===1">分公司</label>
            <label v-if="scop.row.startAgencyType===2">一级转运中心</label>
            <label v-if="scop.row.startAgencyType===3">二级转运中心</label>
            <label v-if="scop.row.startAgencyType===4">网点</label>
          </template>
        </el-table-column>
        <el-table-column prop="endAgencyType" label="终点机构类型">
          <template slot-scope="scop">
            <label v-if="scop.row.endAgencyType===1">分公司</label>
            <label v-if="scop.row.endAgencyType===2">一级转运中心</label>
            <label v-if="scop.row.endAgencyType===3">二级转运中心</label>
            <label v-if="scop.row.endAgencyType===4">网点</label>
          </template>
        </el-table-column>
        <el-table-column prop="lastUpdateTime" label="最近更新时间">

        </el-table-column>
        <el-table-column prop="updaterName" label="更新人">

        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="openUpdLineType(scope.row)">修改</el-button>
            <el-button style="color: red" type="text" size="medium" @click="delLineType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagesum">
        </el-pagination>
      </div>
    </el-card>


    <el-dialog
      title="添加线路类型"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="addLineData" :model="addLineData" label-width="120px">
          <el-form-item label="* 线路类型编号:" prop="typeNumber">
            <el-input type="text" placeholder="请输入线路类型编号" v-model="addLineData.typeNumber"></el-input>
          </el-form-item>
          <el-form-item label="* 线路类型名称:" prop="name">
            <el-input type="text" placeholder="请输入线路类型名称" v-model="addLineData.name"></el-input>
          </el-form-item>
          <el-form-item label="* 起始机构类型:" prop="startAgencyType">
            <el-select v-model="addLineData.startAgencyType" clearable placeholder="请选择">
              <el-option
                v-for="item in updSelect"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="* 终点机构类型:" prop="endAgencyType">
            <el-select v-model="addLineData.endAgencyType" clearable placeholder="请选择">
              <el-option
                v-for="item in updSelect"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="addLineType()">添 加</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="修改线路类型"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">
      <div>
        <el-form ref="updLineData" :model="updLineData" label-width="120px">
          <el-form-item label="* 线路类型编号:" prop="typeNumber">
            <el-input type="text" placeholder="请输入线路类型编号" v-model="updLineData.typeNumber"></el-input>
          </el-form-item>
          <el-form-item label="* 线路类型名称:" prop="name">
            <el-input type="text" placeholder="请输入线路类型名称" v-model="updLineData.name"></el-input>
          </el-form-item>
          <el-form-item label="* 起始机构类型:" prop="startAgencyType">
            <el-select v-model="updLineData.startAgencyType" clearable placeholder="请选择">
              <el-option
                v-for="item in updSelect"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="* 终点机构类型:" prop="endAgencyType">
            <el-select v-model="updLineData.endAgencyType" clearable placeholder="请选择">
              <el-option
                v-for="item in updSelect"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="danger" @click="updLineType()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import method from '../../../api/logisticsmanagement/transitcenter/lineTypeManagement'

export default {

  name: "lineTypeManagement",
  data() {
    return {
      //  当前页
      pagenum: 1,
      //  一页显示几条数据
      pagesize: 5,
      //  总页数
      pagesum: 0,
      //  搜索数据
      queryVO: {
        typeNumber: "",
        name: "",
        startAgencyType: ""
      },
      //  查询出来的分页数据
      tableData: [],
      //  table数据的加载状态
      loading: false,
      //  添加对话框的开启状态
      dialogVisible: false,
      //  添加线路的数据
      addLineData: {
        typeNumber: "",// 线路类型编号
        name: "",//  线路名称
        startAgencyType: "",//  起始机构类型
        endAgencyType: "",//  终点机构类型
      },
      //  修改线路的数据
      updLineData: {
        typeNumber: "",// 线路类型编号
        name: "",//  线路名称
        startAgencyType: "",//  起始机构类型
        endAgencyType: "",//  终点机构类型
      },
      //  修改对话框的开启状态
      dialogVisible1: false,
      //  修改下拉框数据
      updSelect: [
        {
          value: "1",
          label: "分公司"
        },
        {
          value: "2",
          label: "一级转运中心"
        },
        {
          value: "3",
          label: "二级转运中心"
        },
        {
          value: "4",
          label: "网点"
        }
      ]
    }
  },
  methods: {
    //  重置搜索数据
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    //  条件分页查询线路类型及相关数据
    pageLineType() {
      this.loading = true
      method.pageLineType(this.pagenum, this.pagesize, this.queryVO).then(({data}) => {

        if (data.code == 200) {
          this.tableData = data.data.records
          this.pagesum = data.data.total
          this.loading = false
        }
      })
    },
    //  搜索按钮
    sousuo() {
      this.pageLineType()
    },
    //  修改总页数
    setPage(val) {

      this.pagenum = val
      this.pageLineType()

    },
    //  设置一页显示多少数据
    setSize(val) {

      this.pagesize = val
      this.pageLineType()
    },
    //  打开添加线路类型的对话框
    openAddLineType() {
      this.addLineData = {
        typeNumber: "",// 线路类型编号
        name: "",//  线路名称
        startAgencyType: "",//  起始机构类型
        endAgencyType: ""//  终点机构类型
      }
      this.dialogVisible = true
    },
    //  关闭添加线路类型的对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  添加线路类型数据
    addLineType() {
      if (this.addLineData.typeNumber == null || this.addLineData.typeNumber == "") {
        this.$notify({
          title: '警告',
          message: "线路类型编号不能为空!",
          type: 'warning'
        })
        return
      }
      if (this.addLineData.name == null || this.addLineData.name == "") {
        this.$notify({
          title: '警告',
          message: "线路类型名称不能为空!",
          type: 'warning'
        })
        return
      }
      if (this.addLineData.startAgencyType == null || this.addLineData.startAgencyType == "") {
        this.$notify({
          title: '警告',
          message: "起始机构类型不能为空!",
          type: 'warning'
        })
        return
      }
      if (this.addLineData.endAgencyType == null || this.addLineData.endAgencyType == "") {
        this.$notify({
          title: '警告',
          message: "目的地机构类型不能为空!",
          type: 'warning'
        })
        return
      }
      this.dialogVisible = false
      method.addLineType(this.addLineData).then(({data}) => {
        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '线路类型添加成功!',
            type: 'success'
          })
        }
        this.pageLineType()
      })
    },
    //  删除线路类型
    delLineType(val) {

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        method.delLineType(val.id).then(({data}) => {

          if (data.code == 200) {
            this.$notify({
              title: '成功',
              message: '线路类型删除成功!',
              type: 'success'
            })
          }

          if (data.code == 201) {
            this.$notify({
              title: '警告',
              message: data.message,
              type: 'warning'
            })
          }
          this.pageLineType()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //  关闭修改线路类型的对话框
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  打开修改线路类型的对话框
    openUpdLineType(val) {
      this.updLineData = {
        id: val.id,
        typeNumber: val.typeNumber,// 线路类型编号
        name: val.name,//  线路名称
        startAgencyType: val.startAgencyType + "",//  起始机构类型
        endAgencyType: val.endAgencyType + "",//  终点机构类型
      }
      this.dialogVisible1 = true
    },
    //  确定修改线路数据
    updLineType() {
      this.dialogVisible1 = false
      method.updLineType(this.updLineData).then(({data}) => {
        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '线路类型修改成功!',
            type: 'success'
          })
        }
        this.pageLineType()
      })
    }
  },
  created() {
    this.pageLineType()
  }
}
</script>
